<template>
  <f7-page
    name="multiplechoice"
    color-theme="red"
    class="backgroundColor"
    style="overflow:hidden"
  >
    <v-songListSheet
      :songListSheetOpend="songListSheetOpend"
      @getSelectSongListId="getSelectSongListId"
    />
    <div class="navbarMulChoice">
      <div class="navbar_l" @click="handleBack()">
        <f7-button style="display:flex;align-items:center">
          <svg-icon iconClass="back_icon_white" v-if="getThemeDark" />
          <svg-icon iconClass="back_icon" v-else />
        </f7-button>
      </div>
      <div class="navbar_m">
        <div class="mText">
          <span class="spanColor">已选择{{ valFromCheckList.length }}项</span>
        </div>
      </div>
      <div class="navbar_r"></div>
    </div>
    <div class="outter_box">
      <v-checkList :propData="fromPropData" @changeChecked="changeChecked" ref="checkListRef" />
      <f7-block class="footer_block">
        <div class="but_box">
          <f7-button @click="addToNextPlay()">
            <svg-icon iconClass="next_to_play_white" v-if="getThemeDark" />
            <svg-icon iconClass="next_to_play" v-else />
            <div class="spanColor">下一首播放</div>
          </f7-button>
        </div>
        <div class="but_box">
          <f7-button @click="openSongListSheet()">
            <svg-icon iconClass="add_to_list_white" v-if="getThemeDark" />
            <svg-icon iconClass="add_to_list" v-else />
            <div class="spanColor">加入歌单</div>
          </f7-button>
        </div>
        <div class="but_box" v-if="from !='favorite' && from!='search'">
          <f7-button @click="deleteSongs()" >
            <svg-icon iconClass="ic_trash_white" v-if="getThemeDark" />
            <svg-icon iconClass="ic_trash" v-else />
            <div class="spanColor" v-if="from==='whole'">删除</div>
            <div class="spanColor" v-else>从歌单删除</div>
          </f7-button>
        </div>
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import CheckList from '@/components/checklist.vue'
import { mapGetters, mapActions } from 'vuex'
import SongListSheet from '@/components/songlistsheet.vue'
import { deleteBatchFromSongLib } from '@/api/upload.js'
import { deleteBatchFromSongList, addBatchToSongList } from '@/api/index.js'
export default {
  props: {
    propData: {
      type: Array,
      default: () => {
        ;[]
      },
    },
    from: {
      type: String,
      default: '',
    },
    songListId: {
      type: Number,
      default: -1,
    },
    tRef:{
      type:String,
      default:'',
    }
  },
  data() {
    return {
      songListSheetOpend: false,
      valFromCheckList: [],
      fromPropData: [],
      valOnlyId: [],
    }
  },
  watch: {
    propData: {
      handler(val) {
        console.log(val)
        this.fromPropData = val
      },
      immediate: true,
      deep: true,
    },
  },
  components: {
    'v-checkList': CheckList,
    'v-songListSheet': SongListSheet,
  },
  computed: {
    ...mapGetters({
      getThemeDark: 'getThemeDark',
      getUserInfo: 'getUserInfo',
      getManageState: 'getManageState',
    }),
  },
  methods: {
    ...mapActions({
      sendMusic: 'sendMusic',
    }),
    handleBack() {
      this.$f7ready((f7) => {
        f7.views.main.router.back()
      })
    },
    changeChecked(val) {
      console.log('changeChecked', val)
      this.valOnlyId = val
      this.valFromCheckList = []
      this.fromPropData.forEach((item) => {
        if (val.indexOf(item.songId) >= 0) {
          this.valFromCheckList.push(item)
        }
      })
    },
    getSelectSongListId(e) {
      console.log(e)
      this.songListSheetOpend = false
      let queryList = this.valFromCheckList.map((item) => {
        return {
          songId: item.songId,
          songListId: e,
          userId: this.getUserInfo.userid,
        }
      })
      addBatchToSongList(queryList)
        .then((res) => {
          if (res.code === 200) {
            let self = this
            this.$f7ready((f7) => {
              var toastTop = f7.toast.create({
                text: '已添加到歌单',
                position: 'top',
                closeTimeout: 1500,
              })
              toastTop.open()
            })
          } else {
            let self = this
            this.$f7ready((f7) => {
              var toastTop = f7.toast.create({
                text: '添加失败',
                position: 'top',
                closeTimeout: 1500,
              })
              toastTop.open()
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    openSongListSheet() {
      this.songListSheetOpend = true
    },
    deleteSongs() {
      let self = this
      this.$f7ready((f7) => {
        f7.dialog.confirm('确定删除这些歌曲吗?', function() {
          //从曲库中删除
          if (self.from === 'whole') {
            if (!self.getManageState) {
              let toastTop = f7.toast.create({
                text: '请先进入管理者模式',
                position: 'top',
                closeTimeout: 1500,
              })
              toastTop.open()
              return
            }
            let queryList = self.valFromCheckList.map((item) => {
              return {
                id: item.songId,
              }
            })
            deleteBatchFromSongLib(queryList)
              .then((res) => {
                if (res.code === 200) {
                  self.fromPropData = self.fromPropData.filter((item) => {
                    return self.valOnlyId.indexOf(item.songId) === -1
                  })
                  let toastTop = f7.toast.create({
                    text: '删除成功',
                    position: 'top',
                    closeTimeout: 1500,
                  })
                  toastTop.open()
                  self.$bus.$emit('delInMultiplechoice'+self.from+self.tRef,self.valOnlyId);
                  self.$refs.checkListRef.checkedSongs = [];
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
          //从歌单中删除
          else {
            let queryList = self.valFromCheckList.map((item) => {
              return {
                songId: item.songId,
                songListId: self.songListId,
                userId: self.getUserInfo.userid,
              }
            })
            deleteBatchFromSongList(queryList)
              .then((res) => {
                if (res.code === 200) {
                  self.fromPropData = self.fromPropData.filter((item) => {
                    return self.valOnlyId.indexOf(item.songId) === -1
                  })
                  console.log(self.fromPropData)
                  let toastTop = f7.toast.create({
                    text: '删除成功',
                    position: 'top',
                    closeTimeout: 1500,
                  })
                  toastTop.open()
                  self.$bus.$emit('delInMultiplechoice'+self.from+self.tRef,self.valOnlyId);
                  self.$refs.checkListRef.checkedSongs = [];
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
      })
    },
    addToNextPlay() {
      this.valFromCheckList.forEach((item) => {
        this.$store.dispatch('sendMusic', item)
      })
      let self = this
      this.$f7ready((f7) => {
        var toastTop = f7.toast.create({
          text: '已添加到播放列表',
          position: 'top',
          closeTimeout: 1500,
        })
        toastTop.open()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.navbarMulChoice {
  display: flex;
  align-items: center;
  height: 9vh;
  .navbar_l {
    width: 12vw;
    .svg-icon {
      width: 0.25rem;
      height: 0.25rem;
    }
  }
  .navbar_m {
    flex: 1;
    width: 72vw;
    margin-left: 1vw;
    span {
      font-size: 20px;
      white-space: nowrap;
    }
    .mText {
      width: 72vw;
      overflow: hidden;
    }
  }
}
.outter_box {
  position: relative;
  .footer_block {
    height: 0.75rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    bottom: 0;
    width: 100%;
    .but_box {
      width: 30vw;
      flex: 1;
      .button {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
}
</style>
